<template>
    <div>
        <div class="pad_20 flex ba_f">
            <div class="fon_12 mar_r10 color_9">
                <span class="fon_14 color_3">选择门店：</span>
                <el-select v-model="form.shopValue" placeholder="请选择店铺" @change="changeStore">
                    <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.name+'(ID:'+item.id+')'"
                            :value="item.id">
                    </el-option>
                </el-select>
                <el-date-picker
                        v-model="form.time"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="yyyy年MM月dd日"
                        class="mar_l10"
                        @change="changeTime">
                </el-date-picker>
            </div>
        </div>
        <div class="ba_f bor_rad5 mar_t20 pad_20">
            <div class="shuju_title">
                <div class="shuju_title_text">
                    <span>交易概况</span>
                </div>
            </div>
            <div class="rel mar_20">
                <div class="jiaoyi_bg">
                    <div class="pad_l_20">
                        <div class="flex">
                            <div class="title35"> 访客数</div>
                            <div class="toolTip mar_l10">
                                <el-tooltip effect="dark" placement="top">
                                    <div slot="content">统计周期内，全店各页面的访问人数，同一访客多次访问会进行去重</div>
                                    <button type="button"
                                            class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                        <span><i class="el-icon-question"></i></span>
                                    </button>
                                </el-tooltip>
                            </div>
                        </div>
                        <div>{{jyData.userCount || 0}}</div>
                    </div>
                </div>
                <div class="jiaoyi_bg2 flex">
                    <div class="pad_l_20">
                        <div class="flex">
                            <div class="title35">下单人数</div>
                            <div class="toolTip mar_l10">
                                <el-tooltip effect="dark" placement="top">
                                    <div slot="content">下单人数</div>
                                    <button type="button"
                                            class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                        <span><i class="el-icon-question"></i></span>
                                    </button>
                                </el-tooltip>
                            </div>
                        </div>
                        <div>{{jyData.orderUser || 0}}</div>
                    </div>
                    <div class="pad_l_20 mar_l50">
                        <div class="flex">
                            <div class="title35">下单金额</div>
                            <div class="toolTip mar_l10">
                                <el-tooltip effect="dark" placement="top">
                                    <div slot="content">下单金额</div>
                                    <button type="button"
                                            class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                        <span><i class="el-icon-question"></i></span>
                                    </button>
                                </el-tooltip>
                            </div>
                        </div>
                        <div>{{jyData.orderMoney || 0}}</div>
                    </div>
                </div>
                <div class="jiaoyi_bg3 flex">
                    <div class="pad_l_20">
                        <div class="flex">
                            <div class="title35">付款人数</div>
                            <div class="toolTip mar_l10">
                                <el-tooltip effect="dark" placement="top">
                                    <div slot="content">付款人数</div>
                                    <button type="button"
                                            class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                        <span><i class="el-icon-question"></i></span>
                                    </button>
                                </el-tooltip>
                            </div>
                        </div>
                        <div>{{jyData.payUser || 0}}</div>
                    </div>
                    <div class="pad_l_20 mar_l50">
                        <div class="flex">
                            <div class="title35">支付金额</div>
                            <div class="toolTip mar_l10">
                                <el-tooltip effect="dark" placement="top">
                                    <div slot="content">支付金额</div>
                                    <button type="button"
                                            class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                        <span><i class="el-icon-question"></i></span>
                                    </button>
                                </el-tooltip>
                            </div>
                        </div>
                        <div>{{jyData.payMoney || 0}}</div>
                    </div>
                    <div class="pad_l_20 mar_l50">
                        <div class="flex">
                            <div class="title35">客单价</div>
                            <div class="toolTip mar_l10">
                                <el-tooltip effect="dark" placement="top">
                                    <div slot="content">支付金额/付款人数</div>
                                    <button type="button"
                                            class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                        <span><i class="el-icon-question"></i></span>
                                    </button>
                                </el-tooltip>
                            </div>
                        </div>
                        <div>{{jyData.price || 0}}</div>
                    </div>
                </div>
                <div class="jiaoyi_tu ab">
                    <div class="pic"></div>
                </div>
            </div>
            <div>
                <div id="mainEch" style="height: 360px" class="mar_t20"></div>
            </div>
        </div>
        <div class="outmain ba_f mar_t20">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>订单概况</span>
                </div>
            </div>
            <div class="main-icon flex t_l mar_t20">
                <div class="flex-1 t_l pad_20 bortColor">
                    <div class="flex-bet flex-y-top">
                        <div>
                            <p class="title6 fon_14">外卖订单</p>
                            <p class="fon_30 title35 lh16 pad_tb_20">{{jyData.outCount || 0}}</p>
                            <p class="fon_12 title6 lh25" style="color: #fff">较前一日：0</p>
                        </div>
                        <div class="toolTip">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">外卖订单</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                    <span><i class="el-icon-question"></i></span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <div class="flex-1 t_l pad_20 bortColor">
                    <div class="flex-bet flex-y-top">
                        <div>
                            <p class="title6 fon_14">自提订单</p>
                            <p class="fon_30 title35 lh16 pad_tb_20">{{jyData.inCount || 0}}</p>
                            <p class="fon_12 title6 lh25" style="color: #fff">较前一日：0</p>
                        </div>
                        <div class="toolTip">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">自提订单</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                    <span><i class="el-icon-question"></i></span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <div class="flex-1 t_l pad_20 bortColor">
                    <div class="flex-bet flex-y-top">
                        <div>
                            <p class="title6 fon_14">其他订单</p>
                            <p class="fon_30 title35 lh16 pad_tb_20">{{jyData.otherCount || 0}}</p>
                            <p class="fon_12 title6 lh25" style="color: #fff">较前一日：0</p>
                        </div>
                        <div class="toolTip">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">其他订单</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                    <span><i class="el-icon-question"></i></span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <div class="flex-1 t_l pad_20 bortColor">
                    <div class="flex-bet flex-y-top">
                        <div>
                            <p class="title6 fon_14">退款/维权订单数</p>
                            <p class="fon_30 title35 lh16 pad_tb_20">{{jyData.refundCount || 0}}</p>
                            <p class="fon_12 title6 lh25" style="color: #fff">较前一日：0</p>
                        </div>
                        <div class="toolTip">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">包含门店已退款的订单数</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                    <span><i class="el-icon-question"></i></span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <div class="flex-1 t_l pad_20 bortColor">
                    <div class="flex-bet flex-y-top">
                        <div>
                            <p class="title6 fon_14">退款总金额</p>
                            <p class="fon_30 title35 lh16 pad_tb_20">{{jyData.refundMoney || 0}}</p>
                            <p class="fon_12 title6 lh25" style="color: #fff">较前一日：0</p>
                        </div>
                        <div class="toolTip">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">包含门店已退款的订单金额</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                    <span><i class="el-icon-question"></i></span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
            </div>
<!--            <div id="zhentiEch" style="height: 360px;" class="mar_t20"></div>-->
            <div class="mar_t20">
                <div id="shujuEch" style="height: 360px;width: 100%"></div>
            </div>
        </div>
        <div class="mar_t20 pad_20 ba_f">
            <div class="shuju_title">
                <div class="shuju_title_text">
                    <span>支付分析</span>
                </div>
            </div>
            <div class="flex flex-y-top" style="height: 380px;">
                <div class="bflex-5">
                    <div class="t_l">
                        <div class="mar_t10 shuju_table">
                            <el-table
                                    :data="tableData3"
                                    stripe
                                    style="width: 100%">
                                <el-table-column
                                        prop="id"
                                        label="支付渠道"
                                >
                                    <template slot-scope="scope">
                                        <div>微信支付</div>
                                        <div>余额支付</div>
                                    </template>
                                </el-table-column>
                                >
                                <el-table-column
                                        prop="weixin"
                                        label="支付金额"
                                >
                                    <template slot-scope="scope">
                                        <div>{{scope.row.wxPayMoney}}</div>
                                        <div>{{scope.row.balancePayMoney}}</div>
                                    </template>
                                </el-table-column>
                                >
                                <el-table-column
                                        prop="yuer"
                                        label="订单数">
                                    <template slot-scope="scope">
                                        <div>{{scope.row.wxPayCount}}</div>
                                        <div>{{scope.row.balancePayCount}}</div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <div class="bflex-5 flex-center">
                    <div id="mainEch3" style="height: 280px;width:400px;margin-top: 40px"></div>
                </div>
            </div>
        </div>
        <div class="mar_t20 ba_f outmain pad_20 ">
            <div class="shuju_title">
                <div class="shuju_title_text">
                    <span>退款概况</span>
                </div>
            </div>
            <div class="flex-bet">
                <div class="bflex-7 outmain" style="height: 390px;">
                    <div id="mainEch2" style="height:360px"></div>
                </div>
                <div class="bflex-3">
                    <div class="bortColor flex-bet pad_20 flex-y-top">
                        <div>
                            <p class="title6 fon_14">退款订单</p>
                            <p class="fon_30 title35 lh16 pad_tb_20">{{jyData.refundCount || 0}}</p>
                            <div class="flex">
                                <p class="fon_12 title6 lh25" style="color: #fff">昨日 --</p>
                                <p class="fon_12 title6 lh25 mar_l20" style="color: #fff">全部 --</p>
                            </div>
                        </div>
                        <div class="toolTip">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">退款订单</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                    <span><i class="el-icon-question"></i></span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="bortColor flex-bet pad_20 flex-y-top mar_t20">
                        <div>
                            <p class="title6 fon_14">退款金额</p>
                            <p class="fon_30 title35 lh16 pad_tb_20">{{jyData.refundMoney || 0}}</p>
                            <div class="flex">
                                <p class="fon_12 title6 lh25" style="color: #fff">昨日 --</p>
                                <p class="fon_12 title6 lh25 mar_l20" style="color: #fff">全部 --</p>
                            </div>
                        </div>
                        <div class="toolTip">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">退款金额</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                    <span><i class="el-icon-question"></i></span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="outmain ba_f mar_t20">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>历史交易</span>
                </div>
            </div>
            <el-table
                    :data="tableData"
                    stripe
                    style="width: 100%">
                <el-table-column
                        prop="hours"
                        label="时间"
                >
                </el-table-column>
                <el-table-column
                        prop="count"
                        label="有效订单(单)"
                >
                </el-table-column>
                <el-table-column
                        prop="userCount"
                        label="付款人数(人)"
                >
                </el-table-column>
                <el-table-column
                        prop="money"
                        label="交易金额(元)"
                >
                </el-table-column>
                <el-table-column
                        prop="refundMoney"
                        label="退款金额(元)"
                >
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
    import echarts from "echarts";
    import {mapState} from "vuex";
    import {realPay} from "@/api/statistics";
    import {changeDate} from "@/utils/index";
    export default {
        mounted() {
            this.bus.$emit('loading', true);
            this.init();
            window.addEventListener("resize", this.initchart);
        },
        // mounted() {
        //     this.init();
        //     this.init2();
        //     this.init3();
        // },
        data() {
            return {
                jyData:{},
                form: {
                    shopValue: '',
                    timeType: '1',
                    time: [new Date(),new Date()],
                    Mtime: '',
                },
                options: [{
                    value: '1',
                    label: '全部'
                }],
                options2: [{
                    value: '1',
                    label: '自然日'
                },
                    // {
                    //     value: '2',
                    //     label: '自然月'
                    // }
                ],
                tableData3:[
                    {
                        wxPayCount:'',
                        wxPayMoney:'',
                        balancePayCount:'',
                        balancePayMoney:'',
                    }
                ],
                tableData:[],
                echarts1_option: {
                    color: ['#4284ED', '#42CCF0'],
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['外卖', '自提']
                    },
                    grid: {
                        left: '3%',
                        right: '5%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        // 去除坐标轴上的刻度线
                        axisTick: {
                            show: false,
                            lineStyle: {
                                color: '#ccc',
                                type: 'dashed'
                            }
                        },
                        // x轴的字体样式
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#333',
                                fontSize: '12'
                            }
                        },
                        // x轴的颜色和宽度
                        axisLine: {
                            lineStyle: {
                                color: '#4ECB73',
                                width: 2,   //这里是坐标轴的宽度,可以去掉
                            }
                        },
                        data: ['2020-8-17', '2020-8-16', '2020-8-15', '2020-8-14', '2020-8-13', '2020-8-12', '2020-8-11', '2020-8-11', '2020-8-11', '2020-8-11','2020-8-10'],
                    },
                    yAxis: {
                        type: 'value',
                        axisTick: {       //y轴刻度线
                            "show": false
                        },
                        axisLine: {
                            "show": false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#333',
                                fontSize: '12'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dotted',
                                color: '#DDDDDD',
                            },
                            show: true
                        }
                    },
                    series: [
                        {
                            name: '外卖',
                            type: 'bar',
                            data: [10, 52, 75, 35, 40, 75, 30, 10, 52, 80, 25,]
                        },
                        {
                            name: '自提',
                            type: 'bar',
                            data: [10, 52, 20, 30, 25, 35, 80, 10, 52, 50, 60,]
                        }
                    ],
                    // series: [
                    //     {type: 'bar'},
                    //     {type: 'bar'},
                    // ]
                },
                echarts2_option: {
                    color: ['#4284ED', '#42CCF0'],
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['退款订单', '退款金额']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        // 去除坐标轴上的刻度线
                        axisTick: {
                            show: false,
                            lineStyle: {
                                color: '#ccc',
                                type: 'dashed'
                            }
                        },
                        // x轴的字体样式
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#333',
                                fontSize: '12'
                            }
                        },
                        // x轴的颜色和宽度
                        axisLine: {
                            lineStyle: {
                                color: '#4ECB73',
                                width: 2,   //这里是坐标轴的宽度,可以去掉
                            }
                        },
                        data: ['2020-8-17', '2020-8-16', '2020-8-15', '2020-8-14', '2020-8-13', '2020-8-12', '2020-8-11', '2020-8-11', '2020-8-11', '2020-8-11','2020-8-10'],
                    },
                    yAxis: {
                        type: 'value',
                        axisTick: {       //y轴刻度线
                            "show": false
                        },
                        axisLine: {
                            "show": false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#333',
                                fontSize: '12'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dotted',
                                color: '#DDDDDD',
                            },
                            show: true
                        }
                    },
                    series: [
                        {
                            name: '退款订单',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            data: [10, 52, 75, 35, 40, 75, 30, 10, 52, 80, 25,]
                        },
                        {
                            name: '退款金额',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            data: [10, 52, 20, 30, 25, 35, 80, 10, 52, 50, 60,]
                        }
                    ]
                },
                echarts1_option1: {
                    color: ['#42CCF0', '#F5CC4E'],
                    title: {
                        // text: '折线图堆叠'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'line',      // 默认为直线，可选为：'line' | 'shadow'
                            color: '#aaa',
                        }
                    },
                    legend: {
                        data: ['付款人数', '支付金额']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        // 去除坐标轴上的刻度线
                        axisTick: {
                            show: false,
                            lineStyle: {
                                color: '#ccc',
                                type: 'dashed'
                            }
                        },
                        // x轴的字体样式
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#333',
                                fontSize: '12'
                            }
                        },
                        // x轴的颜色和宽度
                        axisLine: {
                            lineStyle: {
                                color: '#ACDF84',
                                width: 2,   //这里是坐标轴的宽度,可以去掉
                            }
                        },
                        data: ['2020-8-17', '2020-8-16', '2020-8-15', '2020-8-14', '2020-8-13', '2020-8-12', '2020-8-11', '2020-8-11', '2020-8-11', '2020-8-11'],
                    },
                    yAxis: {
                        type: 'value',
                        axisTick: {       //y轴刻度线
                            "show": false
                        },
                        axisLine: {
                            "show": false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#333',
                                fontSize: '12'
                            }
                        },
                        splitLine: {    //网格线
                            lineStyle: {
                                type: 'dotted',
                                color: '#DDDDDD',
                            },
                            show: true //隐藏或显示
                        }
                    },
                    series: [
                        {
                            name: '付款人数',
                            type: 'line',
                            stack: '总量',
                            data: [19, 11, 14, 22, 8, 17, 25, 5, 22, 8],
                            smooth: true
                        },
                        {
                            name: '支付金额',
                            type: 'line',
                            stack: '总量',
                            data: [22, 182, 12, 33, 45, 33, 47, 44, 4, 2],
                            smooth: true
                        },
                    ]
                },
                echarts1_option2: {
                    color: ['#4284ED', '#42CCF0'],
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['浏览量', '访客数']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        // 去除坐标轴上的刻度线
                        axisTick: {
                            show: false,
                            lineStyle: {
                                color: '#ccc',
                                type: 'dashed'
                            }
                        },
                        // x轴的字体样式
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#333',
                                fontSize: '12'
                            }
                        },
                        // x轴的颜色和宽度
                        axisLine: {
                            lineStyle: {
                                color: '#4ECB73',
                                width: 2,   //这里是坐标轴的宽度,可以去掉
                            }
                        },
                        data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
                    },
                    yAxis: {
                        type: 'value',
                        axisTick: {       //y轴刻度线
                            "show": false
                        },
                        axisLine: {
                            "show": false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#333',
                                fontSize: '12'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dotted',
                                color: '#DDDDDD',
                            },
                            show: true
                        }
                    },
                    series: [
                        {
                            name: '浏览量',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            data: [10, 52, 75, 35, 40, 75, 30, 10, 52, 80, 25,]
                        },
                        {
                            name: '访客数',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            data: [10, 52, 20, 30, 25, 35, 80, 10, 52, 50, 60,]
                        }
                    ]
                },
                echarts3_option: {
                    color: ['#5654F5', '#4CA8FF', '#4EC478', '#FBA33F'],
                    // tooltip: {
                    //     trigger: 'item',
                    //     formatter: '{a} <br/>{b}: {c} ({d}%)'
                    // },
                    legend: {
                        orient: 'vertical',
                        right: 0,
                        data: ['微信支付','余额支付']
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: ['40%', '60%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '16',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: 35, name: '微信支付'},
                                {value: 20, name: '余额支付'},
                            ],
                        }
                    ]
                },
            }
        },
        created() {
            // this.value = this.market[0].id
            // this.optionsShop = this.market
            this.form.shopValue = this.market[0].id
            this.options = this.market
        },
        computed:{
            ...mapState(['market'])
        },
        methods: {
            async init(){
                let startTime = '';
                let endTime = '';
                if(this.form.time){
                    startTime  = changeDate(this.form.time[0]);
                    endTime = changeDate(this.form.time[1]);
                }
                var params = {
                    startTime,
                    endTime,
                    storeId:this.form.shopValue,
                }
                const {data} = await realPay(params);
                // console.log(111,data)
                if (data) {
                    this.jyData = data
                    this.tableData = data.orderList
                    this.tableData3[0].wxPayCount = data.wxPayCount
                    this.tableData3[0].wxPayMoney = data.wxPayMoney
                    this.tableData3[0].balancePayCount = data.balancePayCount
                    this.tableData3[0].balancePayMoney = data.balancePayMoney
                    this.bus.$emit('loading', false)

                    this.echarts1_option1.series[0].data = data.payArr.map(item => item.money);//付款人数
                    this.echarts1_option1.series[1].data = data.payMoneyArr.map(item => item.money);//支付金额
                    this.echarts1_option1.xAxis.data = data.payArr.map(item => item.hours);

                    this.echarts1_option.series[0].data = data.outArr.map(item => item.money);//外卖
                    this.echarts1_option.series[1].data = data.inArr.map(item => item.money);//自提
                    this.echarts1_option.xAxis.data = data.outArr.map(item => item.hours);

                    this.echarts2_option.series[0].data = data.refundArr.map(item => item.money);//退款
                    this.echarts2_option.series[1].data = data.refundCountArr.map(item => item.money);//付款人数
                    this.echarts2_option.xAxis.data = data.refundArr.map(item => item.hours);

                    this.echarts3_option.series[0].data[0].value = +data.wxPayMoney;
                    this.echarts3_option.series[0].data[1].value = +data.balancePayMoney;
                    this.shujuEch()
                    this.init2()
                    this.init3()
                    this.mainEch3()

                }
            },
            initchart(){
                let myChart1 = echarts.init(document.getElementById('mainEch'))
                let myChart2 = echarts.init(document.getElementById('shujuEch'))
                let myChart3 = echarts.init(document.getElementById('mainEch2'))
                myChart1.resize()
                myChart2.resize()
                myChart3.resize()
            },
            changeStore(){
                this.init()
            },
            changeTime(){
                this.init()
            },
            shujuEch() {
                let myChart = echarts.init(document.getElementById('shujuEch'))
                myChart.setOption(this.echarts1_option, true)
            },
            init2() {
                let myChart = echarts.init(document.getElementById('mainEch'))
                myChart.setOption(this.echarts1_option1, true)
            },
            init3() {
                let myChart = echarts.init(document.getElementById('mainEch2'))
                myChart.setOption(this.echarts2_option, true)
            },
            mainEch3(){
                let myChart = echarts.init(document.getElementById('mainEch3'))
                myChart.setOption(this.echarts3_option, true)
            },
        }
    }
</script>
<style lang="scss" scoped>
    .jiaoyi_bg {
        height: 100px;
        background: rgba(42, 117, 237, 0.06);
    }

    .jiaoyi_bg2 {
        height: 100px;
        background: rgba(42, 117, 237, 0.04);
    }

    .jiaoyi_bg3 {
        height: 100px;
        background: rgba(42, 117, 237, 0.02);
    }

    .jiaoyi_tu {
        right: 20px;
        top: 30px;
        height: 100%;
        width: 460px;
    }

    .jiaoyi_tu .pic {
        position: absolute;
        top: 20px;
        right: 20px;
        bottom: 0;
        height: 240px;
        background-image: url(../../assets/img/index/charts.png);
        background-size: 100% 100%;
        width: 100%;
        z-index: 999;
    }
</style>
